<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父元素高度坍塌 BFC保护</title>
		
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			.server{
				background-color:#e8e8e8;
			}
			.center{
				width: 1000px;
				margin: 0 auto;
			}
			ul{
				list-style: none;
				/*  解决方案3：给父级元素设置BFC结界保护  */
				overflow:hidden
			}
			.server .item{
				width: 210px;
				padding: 50px 0;
				float: left;
				
				text-align: center;
			}
			/*  给浮动元素li的父级ul最后生成一个空白子元素，变块级，清影响 */
			.clearfix::after{
				content: '';	/* 在父元素体内的最后生成新的子元素 */
				display: block;  /* 要想清除浮动影响子元素必须是块级元素 */
				/* 生成的新的块级子元素来清除前面兄弟左右浮动对父级高度产生的影响 */
				clear: both;
			}
			/* 成熟点UI框架通用的清除浮动影响的方式*/
			
		</style>
		
	</head>
	<body>
		
		<!-- 最外层 -->
		<div class="server">
				<!-- 版心 -->
			<div class="center">
				<ul class="clearfix">
					<li class="item"> 
						<img src="./img/img/icon1.png" alt="">
						<p>品质保障</p>
					</li>
					
					<li class="item"> 
						<img src="./img/img/icon2.png" alt="">
						<p>私人订制</p>						
					</li>
					
					<li class="item"> 
						<img src="./img/img/icon3.png" alt="">
						<p>学院特供</p>						
					</li>
					
					<li class="item"> 
						<img src="./img/img/icon4.png" alt="">
						<p>专属特权</p>						
					</li>
					
				</ul>
			</div>
		</div>
		
		
	</body>
</html>